<template>
	<div class="register-container">
		<el-form class="register-form" v-if="pageFlag=='register'" ref="registerForm" :model="registerForm" :rules="rules">
			<div class="register-header">
				<h2 class="title">USER / REGISTER</h2>
				<h3 class="subtitle">社区团购系统注册</h3>
			</div>

			<div class="form-content">
				<div class="form-left">
					<!-- 用户注册表单左侧 -->
					<el-form-item v-if="tableName=='yonghu'" prop="zhanghao">
						<el-input v-model="registerForm.zhanghao" class="form-input" placeholder="请输入账号" />
					</el-form-item>

					<el-form-item v-if="tableName=='yonghu'" prop="mima">
						<el-input v-model="registerForm.mima" class="form-input" type="password" placeholder="请输入密码" />
					</el-form-item>

					<el-form-item v-if="tableName=='yonghu'" prop="mima2">
						<el-input v-model="registerForm.mima2" class="form-input" type="password" placeholder="请再次输入密码" />
					</el-form-item>

					<el-form-item v-if="tableName=='yonghu'" prop="xingming">
						<el-input v-model="registerForm.xingming" class="form-input" placeholder="请输入姓名" />
					</el-form-item>
				</div>

				<div class="form-right">
					<!-- 用户注册表单右侧 -->
					<el-form-item v-if="tableName=='yonghu'" prop="xingbie">
						<el-select v-model="registerForm.xingbie" class="form-input" placeholder="请选择性别">
							<el-option v-for="(item,index) in yonghuxingbieOptions" :key="index" :label="item" :value="item">
							</el-option>
						</el-select>
					</el-form-item>

					<el-form-item v-if="tableName=='yonghu'" prop="shouji">
						<el-input v-model="registerForm.shouji" class="form-input" placeholder="请输入手机" />
					</el-form-item>

					<el-form-item v-if="tableName=='yonghu'" prop="youxiang">
						<el-input v-model="registerForm.youxiang" class="form-input" placeholder="请输入邮箱" />
					</el-form-item>

					<el-form-item v-if="tableName=='yonghu'" prop="touxiang" class="upload-item">
						<file-upload tip="点击上传头像" action="file/upload" :limit="1" :multiple="true" 
							:fileUrls="registerForm.touxiang?registerForm.touxiang:''" @change="yonghutouxiangUploadChange">
						</file-upload>
					</el-form-item>
				</div>
			</div>

			<div class="form-footer">
				<el-button class="submit-btn" type="primary" @click="submitForm('registerForm')">注册</el-button>
				<el-button class="reset-btn" @click="resetForm('registerForm')">重置</el-button>
				<router-link class="login-link" to="/login">已有账户登录</router-link>
			</div>
		</el-form>
	</div>
</template>

<script>

export default {
	//数据集合
	data() {
		return {
			pageFlag : '',
			tableName: '',
			registerForm: {
				xingbie: '',
			},
			rules: {},
			yonghuxingbieOptions: [],
		}
	},
	mounted() {
	},
	created() {
		this.pageFlag = this.$route.query.pageFlag;
		this.tableName = this.$route.query.role;
		if ('yonghu' == this.tableName) {
			this.rules.zhanghao = [{ required: true, message: '请输入账号', trigger: 'blur' }];
		}
		if ('yonghu' == this.tableName) {
			this.rules.mima = [{ required: true, message: '请输入密码', trigger: 'blur' }];
		}
		if ('yonghu' == this.tableName) {
			this.rules.xingming = [{ required: true, message: '请输入姓名', trigger: 'blur' }];
		}
		this.yonghuxingbieOptions = "男,女".split(',');
		if ('yonghu' == this.tableName) {
			this.rules.shouji = [{ required: true, validator: this.$validate.isMobile, trigger: 'blur' }];
		}
		if ('yonghu' == this.tableName) {
			this.rules.youxiang = [{ required: true, validator: this.$validate.isEmail, trigger: 'blur' }];
		}
		if ('yonghu' == this.tableName) {
			this.rules.money = [{ required: true, validator: this.$validate.isNumber, trigger: 'blur' }];
		}
		if ('shangjia' == this.tableName) {
			this.rules.shangpubianhao = [{ required: true, message: '请输入商铺编号', trigger: 'blur' }];
		}
		if ('shangjia' == this.tableName) {
			this.rules.mima = [{ required: true, message: '请输入密码', trigger: 'blur' }];
		}
		if ('shangjia' == this.tableName) {
			this.rules.shangpumingcheng = [{ required: true, message: '请输入商铺名称', trigger: 'blur' }];
		}
		if ('shangjia' == this.tableName) {
			this.rules.lianxidianhua = [{ required: true, validator: this.$validate.isMobile, trigger: 'blur' }];
		}
		if ('shangjia' == this.tableName) {
			this.rules.money = [{ required: true, validator: this.$validate.isNumber, trigger: 'blur' }];
		}
	},
	//方法集合
	methods: {
		// 获取uuid
		getUUID () {
			return new Date().getTime();
		},
		// 下二随
		yonghutouxiangUploadChange(fileUrls) {
			this.registerForm.touxiang = fileUrls.replace(new RegExp(this.$config.baseUrl,"g"),"");
		},
		shangjiashangputupianUploadChange(fileUrls) {
			this.registerForm.shangputupian = fileUrls.replace(new RegExp(this.$config.baseUrl,"g"),"");
		},

		// 多级联动参数


		submitForm(formName) {
			this.$refs[formName].validate((valid) => {
				if (valid) {
					var url=this.tableName+"/register";
					if(`yonghu` == this.tableName && this.registerForm.mima!=this.registerForm.mima2) {
						this.$message.error(`两次密码输入不一致`);
						return
					}
					if(`shangjia` == this.tableName && this.registerForm.mima!=this.registerForm.mima2) {
						this.$message.error(`两次密码输入不一致`);
						return
					}
					this.$http.post(url, this.registerForm).then(res => {
						if (res.data.code === 0) {
							this.$message({
								message: '注册成功',
								type: 'success',
								duration: 1500,
								onClose: () => {
									this.$router.push('/login');
								}
							});
						} else {
							this.$message.error(res.data.msg);
						}
					});
				} else {
					return false;
				}
			});
		},
		resetForm(formName) {
			this.$refs[formName].resetFields();
		}
	}
}
</script>

<style lang="scss" scoped>
.register-container {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(35deg, #c37c4f 0%, #8ed0ec 100%);
}

.register-form {
	width: 900px;
	padding: 40px;
	background: rgba(255, 255, 255, 0.95);
	border-radius: 15px;
	box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

.register-header {
	text-align: center;
	margin-bottom: 30px;

	.title {
		font-size: 28px;
		color: #08b344;
		font-weight: bold;
		margin-bottom: 10px;
	}

	.subtitle {
		font-size: 20px;
		color: #08b344;
	}
}

.form-content {
	display: flex;
	justify-content: space-between;
	
	.form-left, .form-right {
		width: 48%;
	}
}

.form-input {
	width: 100%;
	
	/deep/ .el-input__inner {
		border: none;
		border-bottom: 2px solid #08b344;
		border-radius: 0;
		padding: 0 15px;
		height: 44px;
		background: transparent;
		
		&:focus {
			border-bottom-color: #0ca140;
		}
	}
}

.upload-item {
	margin-top: 20px;
	
	/deep/ .el-upload {
		border: 1px dashed #08b344;
		border-radius: 8px;
		cursor: pointer;
		
		&:hover {
			border-color: #0ca140;
		}
	}
}

.form-footer {
	text-align: center;
	margin-top: 30px;

	.submit-btn {
		width: 45%;
		background: linear-gradient(45deg, #08b344, #0ca140);
		border: none;
		color: white;
		height: 40px;
		border-radius: 20px;
		font-size: 16px;
		margin-right: 20px;
		
		&:hover {
			opacity: 0.9;
		}
	}

	.reset-btn {
		width: 45%;
		background: white;
		border: 1px solid #ddd;
		color: #666;
		height: 40px;
		border-radius: 20px;
		font-size: 16px;
		
		&:hover {
			border-color: #08b344;
			color: #08b344;
		}
	}

	.login-link {
		display: block;
		margin-top: 20px;
		color: #08b344;
		text-decoration: none;
		font-size: 14px;
		
		&:hover {
			text-decoration: underline;
		}
	}
}
</style>
